<template>
  <div class="ItemMusicTop">
    <img :src="playlist.coverImgUrl" alt="">
    <div class="ItemMusicTopNav">
        <div @click="$router.go(-1)"><span class="icon-arrow-left2"></span></div>
        <div class="ItemMusicTopNav_mid">
            <div><span>歌单</span></div>
            <div><span class="icon-search"></span></div>
        </div>
        <div><span class="icon-list2"></span></div>
    </div>
    <div class="ItemMusicTopContre clearfix">
        <div class="ItemMusicTopContre_left">
            <img :src="playlist.coverImgUrl" alt="">
        </div>
        <div class="ItemMusicTopContre_right">
            <div>{{playlist.name}}</div>
            <div>{{playlist.description}}</div>
        </div>
    </div>
    <div class="ItemMusicTopList">
        <div><span class="icon-bubble2"></span><div>40</div></div>
        <div><span class="icon-cog"></span><div>25</div></div>
        <div><span class="icon-download3"></span><div>下载</div></div>
        <div><span class="icon-checkmark2"></span><div>多选</div></div>
    </div >
  </div>
</template>

<script>
export default {
    props: ['playlist'],
    mounted() {
        
    }
}
</script>

<style scoped>
.ItemMusicTop{
    padding: .2rem;
}
.ItemMusicTop>img {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    filter: blur(30px);
}
.ItemMusicTopNav {
    display: flex;
    justify-content: space-between;
    font-size: .4rem;
    color: #fff;
}
.ItemMusicTopNav_mid  {
    width: 70%;
    display: flex;
    justify-content: space-between;
}
.ItemMusicTopContre {
    width: 100%;
    margin: .6rem 0;
}
.ItemMusicTopContre_left {
    width: 35%;
    float: left;
}
.ItemMusicTopContre_left img {
    width: 100%;
    border-radius: .2rem;
}
.ItemMusicTopContre_right {
    width: 60%;
    float: right;
}
.ItemMusicTopContre_right>div:nth-child(1) {
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden;
    color: #fff;
}
.ItemMusicTopContre_right>div:nth-child(2) {
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden;
    font-size: .25rem;
    opacity: .4;
    color: #fff;
    margin-top: 24%;
}
.ItemMusicTopList {
    display: flex;
    justify-content: space-between;
    opacity: .8;
}
.ItemMusicTopList>div {
    text-align: center;
    color: #fff;
    font-size: .5rem;
    width: 20%;
}
.ItemMusicTopList>div>div {
    font-size: .28rem;
}
</style>